<template>
<div id="register">
    <form @submit.prevent="register" id="register-form">
        <md-card>
            <md-card-header>
                <div class="md-title">REGISTER</div>
            </md-card-header>

            <md-card-content>

                <b-form-group label="用户名:" label-for="username" description="用户名不得超过16个字符">
                    <b-form-input id="username" v-model.trim="user.username" required placeholder="Enter Username" maxlength=16 :state="usernameCorrect" @blur="checkUsername"></b-form-input>
                </b-form-group>

                <b-form-group label="电子邮箱:" label-for="email">
                    <b-form-input id="email" v-model.trim="user.email" type="email" required placeholder="Enter email" :state="emailCorrect" @blur="checkEmail"></b-form-input>
                </b-form-group>

                <b-form-group label="密码:" label-for="password" description="密码只能为数字字母下划线且不少于6位">
                    <b-form-input id="password" v-model.trim="user.password" type="password" required placeholder="Enter Password" minlength=6 :state = "passwordCorrect" @blur="checkPassword"></b-form-input>
                </b-form-group>

                <b-form-group label="重复密码:" label-for="re-password" >
                    <b-form-input  id="re-password" v-model.trim="user.rePassword" type="password" required placeholder="Repeat Password" minlength=6 :state="rePasswordCorrect" @blur="checkRePassword"></b-form-input>
                </b-form-group>

                <md-field>
                    <label for="hobbies">SELECT SOME HOBBIES</label>
                    <md-select v-model="user.hobbies" id="hobbies" multiple required  >
                        <md-option v-for="hobby in hobbies" :key="hobby.id" :value="hobby">{{hobby}}</md-option>

                    </md-select>
                </md-field>

                <div id="VerificationCode">
                    <b-form-input v-model.trim="user.verifyCode" placeholder="请输入验证码"></b-form-input>
                    <md-button class="md-raised md-accent" @click="getVerifyCode" :disabled="gettingCode">{{codeBtnText}}</md-button>
                </div>
                <b-alert :show="showAlert" variant="danger">{{alertInfo}}</b-alert>
                <md-button type="submit" class="md-raised md-primary">注册</md-button>

            </md-card-content>
        </md-card>
    </form>
</div>
</template>

<script>

export default {
    name: 'register',

    data: () => ({
        alertInfo:'',
        showAlert:false,
        rePasswordCorrect:null,
        passwordCorrect:null,
        usernameCorrect:null,
        emailCorrect:null,
        codeBtnText:'发送验证码',
        gettingCode:false,
        backgroundImg: require('../assets/background.jpg'),
        user: {
            username:'',
            email:'',
            password:'',
            rePassword:'',
            verifyCode:'',
            hobbies: [],
            
        },

        hobbies: ['篮球', '音乐', '编程'],
        

    }),
    mounted() {
        document.title = "REGISTER";
        document.body.style.backgroundImage = `url(${this.backgroundImg})`;
    },
    methods: {
        checkRePassword(){
            this.rePasswordCorrect = (this.user.password === this.user.rePassword);
        },
        checkPassword(){
            this.passwordCorrect= this.user.password.length>=6?true:false;
        },
        checkUsername(){
            this.usernameCorrect = this.user.username.length>0?true:false;
        },
        checkEmail(){
            this.emailCorrect = this.tools.checkEmail(this.user.email);
        },
        getVerifyCode(){
            if (!this.tools.checkEmail(this.user.email)) {
                alert('邮箱格式不正确！');
                return;
            }
            let data = {username:this.user.username,email:this.user.email};
            const url = `${this.config.SERVER}/user/register/getcode`;
            this.axios.post(url,data).then(res=>{
                window.console.log(res);
            }).catch(err=>{
                window.console.log(err.response);
            })
            this.gettingCode = true;
            let seconds = 60;
            this.codeBtnText = seconds + '秒';
            let interval = setInterval(()=>{
                if(seconds<=0){
                    clearInterval(interval);
                    this.gettingCode = false;
                    this.codeBtnText = '发送验证码';
                    return false;
                }
                seconds--;
                this.codeBtnText = seconds +'秒';
            },1000);
        },
        register() {
            this.showAlert = false;
            if (!this.tools.checkEmail(this.user.email)) {
                alert('邮箱格式不正确！');
                return;
            }
            const url = `${this.config.SERVER}/user/register`;

            this.axios.post(url, this.user).then(res => {
                this.showAlert = true;
                this.alertInfo = res.data.msg;
                
            }).catch(err => {
                this.showAlert = true;
                this.alertInfo = err.response.data.msg;
                
            })
        }
    }

}
</script>

<style lang="scss" scoped>
$mobile-width: 600px;

#register {
    background: white;
    position: absolute;
    width: 100vw;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: $mobile-width) {

    #register {
        width: 560px;

    }
}

#VerificationCode{
    display: flex;
    align-items: center;
}
</style>
